<!-- 新建实物奖品 -->
<template>
  <a-drawer v-model:visible="vdata.visible" :maskClosable="false" width="40%">
    <template #title>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span v-if="vdata.isAdd">新增消息回复</span>
        <span v-else>修改消息回复</span>
      </div>
    </template>

    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="vertical"
      :rules="vdata.rules"
      :hideRequiredMark="true"
      :colon="false"
      labelAlign="left"
      :labelCol="{ span: 24 }"
      :wrapperCol="{ span: 24 }"
      style="margin-top: 30px; margin-left: 20px"
    >
      <a-row justify="space-between">
        <!-- <a-col :span="24">
          <a-form-item label="请求消息类型" name="reqType" >
            <a-select v-model:value="vdata.saveObject.reqType" placeholder="请选择请求消息类型" :options="reqTypeOptions" style="width: 50%;"/>
          </a-form-item>
        </a-col> -->
        <a-col :span="11">
          <a-form-item label="匹配类型" name="repMate">
            <a-select v-model:value="vdata.saveObject.repMate" placeholder="请选择匹配类型">
              <a-select-option :value="1">全匹配</a-select-option>
              <a-select-option :value="2">半匹配</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item label="关键词" name="reqKeyword">
            <a-input v-model:value="vdata.saveObject.reqKeyword" placeholder="请输入关键词" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="回复消息" name="replyMessage">
            <gz-message-box ref="gzMessageBoxRef" v-model:repType="vdata.saveObject.repType" v-model:value="vdata.saveObject.repValue" style="width: 100%;" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right: 8px" @click="()=>{vdata.visible = false}">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import {$apiOfficialReplySaveReply,$apiOfficialReplyGetReplyDetail,$apiOfficialReplyUpdateReply} from '@/api/proxy/officialManage/messageReply/index'
import { reactive, ref, defineExpose, getCurrentInstance, provide } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const formRef = ref()
const gzMessageBoxRef = ref()

const props = defineProps(['callbackFunc'])

const vdata:any = reactive({
  visible: false,
  saveObject: {
    repType: 'text',  // 回复消息类型
  },
  rules: {
    repMate: [{ required: true, message: '请选择匹配类型', trigger: 'blur' }],
    reqKeyword: [{ required: true, message: '请输入关键词', trigger: 'blur' }]
  }
})

const reqTypeOptions = ref([
  { label: '文本消息', value: 'text' },
  { label: '图片', value: 'image' },
  { label: '语音', value: 'voice' },
  { label: '视频', value: 'video' },
  { label: '小视频', value: 'shortvideo' },
  { label: '地理位置', value: 'location' },
])

/**
 * 提交保存
 */
function handleOkFunc() {
  Object.assign(vdata.saveObject, vdata.saveObject.repValue)

  formRef.value.validate().then(()=>{
    const { repType, repContent, repMediaId } = vdata.saveObject
    if((repType === 'text' && repContent == '') || (repType !== 'text' && !repMediaId)){
      $infoBox.message.warn('回复消息不能为空')
      return
    }
    if(vdata.isAdd){
      const message = '新增成功'
      // 新增
      $apiOfficialReplySaveReply(vdata.saveObject).then(() => {
      $infoBox.message.success(message)
      props.callbackFunc()
      vdata.visible = false
    })
    }else{
      // 修改
      const message = '修改成功'
      $apiOfficialReplyUpdateReply(vdata.saveObject).then(() => {
      $infoBox.message.success(message)
      props.callbackFunc()
      vdata.visible = false
    })
    }

    
  }).catch(()=>{})
}
/**
 * 显示弹窗
 * @param replyType {string} 回复消息类型
 * @param officialAppId {string} 公众号appId
 */
function show(replyType,officialAppId,officialReplyId) {
  console.log('走到这里889999',officialReplyId)
  vdata.isAdd = !officialReplyId
  // 数据初始化
  vdata.saveObject = {
    repType: 'text'
  }
  vdata.saveObject.replyType = replyType
  vdata.saveObject.officialAppId = officialAppId
  if(vdata.isAdd){  // 新增
    vdata.visible = true
  }else{  // 修改
    console.log('走到这里88888')
    // 请求详情
    $apiOfficialReplyGetReplyDetail({ replyId:officialReplyId }).then(res => {
      Object.assign(vdata.saveObject, res)
      // 回复消息框数据回显处理
      const { repContent, repMediaId, repUrl } = vdata.saveObject
      vdata.saveObject.repValue = { repContent, repMediaId, repUrl }
      vdata.visible = true
    })
  }
}

defineExpose({
  show,
})
</script>

<style lang="less" scoped>
</style>
